<template>
  <nav class="navbar">
    <ul>
      <li><router-link to="/announcement">游客中心</router-link></li>
      <li><router-link to="/complaint">投诉中心</router-link></li>
      <li><router-link to="/entertainment">演出查询</router-link></li>
      <li><router-link to="/hotels">酒店查询</router-link></li>
      <li><router-link to="/restaurant">餐厅查询</router-link></li>
      <li><router-link to="/routes">旅游路线</router-link></li>
      <li><router-link to="/traffic">交通状况</router-link></li>
      <li><router-link to="/weather">天气查询</router-link></li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'NavigationBar'
};
</script>

<style>
.navbar {
  background-color: rgba(0, 0, 0, 0); /* 设置导航栏背景色为黑色，透明度为70% */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  position: fixed; /* 固定导航栏 */
  top: 0; /* 固定在屏幕顶部 */
  width: 100%; /* 占满屏幕宽度 */
  z-index: 1000; /* 设置较高的层级，以便始终显示在前 */
  backdrop-filter: blur(10px); /* 添加背景模糊效果 */
}

.navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: contents;
}

.navbar ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0); /* 设置列表项背景色为蓝色，透明度为50% */
  padding: 1em;
  border-right: 1px solid rgba(0, 0, 0, 0.95); /* 设置边框色为白色，透明度为20% */
  transition: background-color 0.3s ease; /* 添加平滑的背景色过渡效果 */
  border-radius: 8px; /* 添加圆角边框 */
}

.navbar ul li:last-child {
  border-right: none;
}

.navbar ul li a {
  color: rgb(0, 0, 0); /* 设置字体颜色为白色 */
  text-decoration: none;
  width: 100%;
  text-align: center;
  font-weight: bold; /* 设置字体加粗 */
  border-radius: 8px; /* 添加圆角边框 */
}
.navbar ul li a.hover{
  color: rgb(0,0,0);
  text-decoration:color(from color srgb r g b);
}
.navbar ul li:hover {
  background-color: rgb(255, 255, 255,1); /* 设置悬停时背景色为更深的蓝色，透明度为95% */
  color: white;
  transform: scale(1.1); /* 悬停时放大 */
  transition: transform 0.3s ease; /* 添加图标放大平滑过渡效果 */
  border-radius: 8px; /* 添加圆角边框 */
}

.navbar ul li:hover img, .navbar ul li:hover .icon {
  transform: scale(1.2); /* 悬停时图标放大 */
  transition: transform 0.3s ease; /* 添加图标放大平滑过渡效果 */
  border-radius: 8px; /* 添加圆角边框 */

}

</style>
